<template>
  <el-form :rules="rules" class="form_table" :model="ruleForm" ref="ruleForm">
          <el-form-item prop="username">
            <el-input  id="name" v-model="ruleForm.username" name="uname" class="message_input"  type="text" value="" placeholder="用户名："></el-input>
          </el-form-item>
          <el-form-item prop="telephone">
            <el-input  id="telephone" v-model="ruleForm.telephone" class="message_input" type="text" value="" placeholder="手机号："></el-input>
          </el-form-item>
          <el-form-item prop="e_mail">
            <el-input  id="e_mail" v-model="ruleForm.e_mail" class="message_input" type="text" value="" placeholder="邮箱："></el-input>
          </el-form-item> 
          <el-form-item prop="password"> 
            <el-input  id="password" v-model="ruleForm.password" class="message_input" type="password" value="" placeholder="密码："></el-input>
          </el-form-item>   
            <label><input @change="retainRecord" @click="controlSingel($event)" type="radio" name = "test" class = "test" id = "test-s1" value = "true"> </label><span class = "span-style">我已阅读并同意使用条款及处理规范</span>
            <el-button  class="btns" @click="submitForm('ruleForm')" >立即注册</el-button>
          </el-form>
</template>

<script>
import {strToMd5} from '../../util/md5.js'
export default {
    name:"RegisterForm",
    data(){
      return {
        ruleForm:{
          username:'',
          telephone:'',
          e_mail:'',
          password:''
        },
        rules:{
          username:[
            {required: true, message: '请输入用户名', trigger: 'blur'},
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          telephone:[
            { required: true, message: '请输入电话', trigger: 'blur' },
            { pattern:/^1[3456789]\d{9}$/, message: '请输入正确的电话号码',trigger: 'blur'  }
          ],
          e_mail:[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 110 个字符', trigger: 'blur' }
          ]
        },
      };
    },
    methods:{
    submitForm(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            this.ruleForm.password=strToMd5(this.ruleForm.password)
            const {data:res}=await this.$http.post("/javaweb/register",this.ruleForm);
            if(res.code==200){
              this.$message.success('注册成功！');
              this.$router.push("login");
            }
            else{
            this.$message.error('注册失败！用户名重复！');
            return false;
            }
          } 
        });
    },
    controlSingel($event) {
      let that = this;
      window.setTimeout(() => {
        if (!this.changed) {
          $event.target.checked = false;      
            }
        that.changed = false;
      }, 0);
    },
    retainRecord() {
      this.changed = true;
    },
  }
}
</script>

<style lang="less" scoped>
.form_table{
  width: 400px;
  height:450px ;
  margin-top:20px ;
  margin-left: 50px;
}
.message_input{
  width: 400px;
  height: 35px;
  border-radius: 5px;
  border: 0px;
  border-color: rgb(151, 144, 144);
  border-style: solid;
 
}
input:focus{
    border-style:solid;
    border-color: #03a9f4;
	  box-shadow: 0 0 5px #03a9f4;
}
.btns{
  width: 400px;
  height: 40px;
  font-size: 20px;
  color:white;
  background-color: rgb(238, 123, 16);
  border-radius: 5px;
  border: 0px;
  margin-top:15px ;
}
</style>